
<table cellpadding="0" cellspacing="0" border="0" class="responsive dynamicTable display table table-bordered" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>Login</th>
            <th>Nom et Prénom</th>
            <th>Téléphone</th>
            <th>Function</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
                            {% for user in users %}
                            {% if(not is_granted('ROLE_SUPER_ADMIN')) %}
                                {% if(not user.hasRole('ROLE_SUPER_ADMIN')) %}
            <tr class="odd gradeX">
                <td style="display: none">{{user.departement}}</td>
                <td>{{user.username}}</td>
                <td>{{user.nom}} {{user.prenom}}</td>
                <td>{{user.telephone}}</td>
                <td>{{user.function}}</td>
                <td>
                    <div class="controls center">
                                        {% if((user.departement.id == app.user.departement.id) and (user.id != app.user.id)) %}
                            <a href="javascript:EditUser('{{user.id}}')" title="Edit task" class="tip"><span class="icon12 icomoon-icon-pencil"></span></a>
                            <a href="javascript:RemoveUser('{{user.id}}')" title="Remove task" class="tip"><span class="icon12 icomoon-icon-remove"></span></a>
                                        {% endif %}
                            </div>
                        </td>
                    </tr>
                                {% endif %}
                            {% else %}
                    <tr class="odd gradeX">
                        <td style="display: none">{{user.departement}}</td>
                        <td>{{user.username}}</td>
                        <td>{{user.nom}} {{user.prenom}}</td>
                        <td>{{user.telephone}}</td>
                        <td>{{user.function}}</td>

                        <td class="center">
                            <div class="controls center">
                                <a href="javascript:EditUser('{{user.id}}','{{user.nom}} {{user.prenom}}')" title="Edit task" class="tip"><span class="icon12 icomoon-icon-pencil"></span></a>
                                <a href="javascript:RemoveUser('{{user.id}}','{{user.nom}} {{user.prenom}}')" title="Remove task" class="tip"><span class="icon12 icomoon-icon-remove"></span></a>
                            </div>

                        </td>
                    </tr>
                            {% endif %}
                            {% endfor %}
                </tbody>
                <tfoot>
                    <tr>
                        <th></th>
                        <th>Login</th>
                        <th>Nom et Prénom</th>
                        <th>Téléphone</th>
                        <th>Function</th>
                        <th>Action</th>
                    </tr>
                </tfoot>
            </table>
            <script>

                oTable = $('.dynamicTable').dataTable({
                    "oLanguage": {
                        "sSearch": "Recherhce:"
                    },
                    "sPaginationType": "full_numbers",
                    "fnDrawCallback": function(oSettings) {
                        if (oSettings.aiDisplay.length == 0)
                        {
                            return;
                        }

                        var nTrs = $('.dynamicTable tbody tr');
                        var iColspan = nTrs[0].getElementsByTagName('td').length;
                        var sLastGroup = "";
                        for (var i = 0; i < nTrs.length; i++)
                        {
                            var iDisplayIndex = oSettings._iDisplayStart + i;
                            var sGroup = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData[0];
                            if (sGroup != sLastGroup)
                            {
                                var nGroup = document.createElement('tr');
                                var nCell = document.createElement('td');
                                nCell.colSpan = iColspan;
                                nCell.className = "group";
                                nCell.innerHTML = sGroup;
                                nGroup.appendChild(nCell);
                                nTrs[i].parentNode.insertBefore(nGroup, nTrs[i]);
                                sLastGroup = sGroup;
                            }
                        }
                    },
                    "aoColumnDefs": [
                        {"bVisible": false, "aTargets": [0]}
                    ],
                    "aaSortingFixed": [[0, 'asc']],
                    "aaSorting": [[1, 'asc']],
                    "sDom": 'lfr<"giveHeight"t>ip'
                });
                </script>